<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/lib/echarts-3.3.1/echarts.min.js"></script>
  <script src="../../scripts/plugins/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>
  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li class="active"><a href="device-topology.html"><i class="icon-direction"></i><span>设备拓扑图</span></a></li>
      <li><a href="device-list.html"><i class="icon-table"></i><span>设备列表</span></a></li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>设备列表</h2></div>

    <div class="sys-content">
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>设备列表</h3>
            <label>探针设备 <em>13/15</em></label><label class="label">脱敏设备 <em>2/3</em></label><label>运维设备 <em>3/3</em></label>
          </div>

          <!-- <div class="btnbar dropdown">
            <button class="btn btn-minor">批量操作</button>
            <ul class="dropdown-menu">
              <li><i class="icon-delete"></i><span>删除</span></li>
            </ul>
          </div> -->

          <div class="filter">
            <select><option>设备类型</option></select>
            <select><option>设备状态</option></select>
            <div class="fm-group"><select><option>设备名称</option><option>设备编号</option><option>管理员</option></select>
              <input type="text" placeholder="请输入关键词查询">
            </div>
            <button class="btn">检索</button>
          </div>

        </div>
        <div class="panel-body" style="position:relative">

          <div class="lv1">
            <i class="icon-cabinet"></i><span>监管平台</span></li>
          </div>

          <div class="lv2">
<div class="lv21 scrollbarx">
  <ul>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li class="fc-warning" title="状态：故障&#10;IP：192.172.17.26 "><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li class="fc-warning" title="状态：故障&#10;IP：192.172.17.26 "><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li class="checked"><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li class="fc-warning" title="状态：故障&#10;IP：192.172.17.26 "><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
    <li><i class="icon-server-wifi"></i><span>探针设备</span></li>
  </ul>
</div>
<div class="lv22 scrollbarx">
  <ul>
    <li><i class="icon-server-db"></i><span>脱敏设备</span></li>
    <li><i class="icon-server-db"></i><span>脱敏设备</span></li>
    <li><i class="icon-server-db"></i><span>脱敏设备</span></li>
  </ul>
</div>
<div class="lv23 scrollbarx">
  <ul>
    <li><i class="icon-server"></i><span>运维设备</span></li>
    <li><i class="icon-server"></i><span>运维设备</span></li>
    <li><i class="icon-server"></i><span>运维设备</span></li>
  </ul>
</div>
<div class="lv23 scrollbarx">
  <ul>
    <li><i class="icon-server"></i><span>运维设备</span></li>
    <li><i class="icon-server"></i><span>运维设备</span></li>
    <li><i class="icon-server"></i><span>运维设备</span></li>
  </ul>
</div>
          </div>

          <div class="rightmenu">
            <ul>
              <li><i class="icon-infomation"></i><span>设备信息</span></li>
              <li><i class="icon-txt"></i><span>设备日志</span></li>
              <li><i class="icon-setting"></i><span>配置</span></li>
<!--               <li><i class="icon-reboot"></i><span>重启</span></li>
  <li><i class="icon-shutdown"></i><span>关机</span></li> -->
  <li><i class="icon-delete"></i><span>删除设备</span></li>
</ul>
</div>

</div>
</div>
</div>
</div>

<div class="dialog" id="info">
  <div class="dialog-win">
    <div class="dialog-head"><span>设备信息 - 探针设备001</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
    <div class="dialog-body">
      <ul class="inline-list">
        <li>设备类型：脱敏设备</li>
        <li>IP 地址:172.199.25.110</li>
        <li>设备位置：中心机房A区201</li>
        <li></li>
        <li>联系人:白雪飞</li>
        <li>联系电话:13990992727</li>
      </ul>
      <div class="btnbar dropdown">
        <button class="btn btn-minor">统计时间范围</button>
        <ul class="dropdown-menu">
          <li><span>最近一天</span></li>
          <li><span>最近一周</span></li>
          <li><span>最近一月</span></li>
        </ul>
      </div>
      <div class="row">
        <div class="col-6"><div id="chart1" style="height:200px;"></div></div>
        <div class="col-6"><div id="chart2" style="height:200px;"></div></div>
        <div class="col-6"><div id="chart3" style="height:200px;"></div></div>
        <div class="col-6"><div id="chart4" style="height:200px;"></div></div>
      </div>

    </div>
  </div>
</div>
<!--dialog end-->

<div class="dialog dialog-lg" id="cl">
  <div class="dialog-win">
    <div class="dialog-head"><span>设备配置 - 探针设备001</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
    <div class="dialog-body" style="padding:0;">
      <div class="dialog-left" style="height:560px;">
        <ul>
          <li class="active"><a target="ifm" href="http://192.168.112.200/jsp/audit/risk/whileList.jsp">白名单管理</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/jfreeReport/franchiseOperation.jsp">特权操作</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/authority/userPanel.jsp">用户管理</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/auditRecord/aliasSetting.jsp">审计对象别名</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/ipMacTable/ipMacTable.jsp">访问者别名</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/auditRecord/hideSet.jsp">隐秘数据配置</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/ruleOptSeting.jsp">审计控制</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/general/ruleTime.jsp">规则生效时间</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/objSetting.jsp">子对象</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/detectGroup/auditBusObj.jsp">审计对象</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/detectGroup/noticeObj.jsp">通知对象</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/sqlOperationType.jsp">操作类型</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/combinedRuleSetting.jsp">组合规则</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/ruleSetting.jsp">规则管理</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/risk/whileList.jsp">白名单管理</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/ruleGrpSetting.jsp">规则组管理</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/componentConfig/global.jsp">基本配置</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/componentConfig/serve.jsp">设备服务</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/authority/safetyConfig.jsp">安全配置</a></li>
<!--
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/notice/snmp_conf.jsp">SNMP配置</a></li>
          <li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/general/syslog.jsp">SYSLOG配置</a></li>
<li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/general/ftpCfg.jsp">FTP服务器</a></li>
<li><a target="ifm" href="http://192.168.112.200/jsp/audit/funcConfig/engineConfig.jsp">通知策略</a></li>
<li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/general/dataSource.jsp">进程配置</a></li>
<li><a target="ifm" href="http://192.168.112.200/jsp/sysConfig/general/driverIp.jsp">驱动级IP过滤</a></li>
<li><a target="ifm" href="http://192.168.112.200/jsp/audit/rule/systemSentence.jsp">系统语句</a></li> -->
</ul>
</div>
<div class="dialog-right">
  <div class="scrollbar" style="width:100%;height:550px; padding:10px;">
    <iframe id="ifm" name="ifm" class="" src="http://192.168.112.200/jsp/audit/risk/whileList.jsp" style="width:100%;border:none;min-height:520px;"></iframe>
  </div>
</div>
</div>
</div>
</div>
<!--dialog end-->


<div class="dialog dialog-xs" id="delete">
  <div class="dialog-win">
    <div class="dialog-head"><span>删除确认</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
    <div class="dialog-body">
      <div class="msg fc-danger">删除后不可恢复，确定要删除吗？</div>
    </div>
    <div class="dialog-foot"><button class="btn" id="save">确认</button><button id="cancel" class="btn btn-minor">取消</button></div>
  </div>
</div>
<!--dialog end-->
</body>
</html>
<script>
  (function($){
    $(window).load(function(){
      $(".scrollbar").mCustomScrollbar({
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });

      $(".scrollbarx").mCustomScrollbar({
        horizontalScroll:true,
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });
    });
  })(jQuery);



  $(document).ready(function(){
   $(".lv2 ul").on("click", "li", function() {
    $(".rightmenu").hide();
    $(".lv2 ul li").removeClass('checked');
    $(this).addClass('checked');
    // $(this).hasClass('checked') ? $(this).removeClass('checked') : $(this).addClass('checked');
  })

   $(".dropdown").on("click", "button", function() {
    $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
  })


   $("#urllist").on("change",function(){
    $("#iframe").prop("src",$(this).val());
  })

   $(".rightmenu ul li:eq(0)").on("click",function(){
    $("#info").show();
    var myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption(option1, true);


    var myChart2 = echarts.init(document.getElementById('chart2'));
    myChart2.setOption(option2, true);


    var myChart3 = echarts.init(document.getElementById('chart3'));
    myChart3.setOption(option3, true);


    var myChart4 = echarts.init(document.getElementById('chart4'));
    myChart4.setOption(option4, true);

  })
   $(".rightmenu ul li:eq(2)").on("click",function(){
       debugger
    $("#cl").show();
  })

   $(".rightmenu ul li:eq(3)").on("click",function(){
    $("#delete").show();
  })

   $(".dialog-left ul li").on("click",function(){
    $(this).siblings().removeClass("active").end().addClass('active');
  })

   $(".dialog .close,#cancel").on("click",function(){
    $(".dialog").hide();
  })

 })

$(function() {
  $(".lv2").unbind("mousedown").bind("contextmenu", function (e) {
    e.preventDefault();
    return false;
  });
  $(".lv2").unbind("mousedown").bind("mousedown", function (event) {
    if (event.which == 3) {
      var offset = $(this).offset();
      var relativeX = (event.pageX - offset.left+240);
      var relativeY = (event.pageY - offset.top+100);
      $(".rightmenu").css({"left":relativeX,"top":relativeY}).show();
    }
    if (event.which == 1) {
      $(".rightmenu").hide();
    }
  });


})
</script>

<script type="text/javascript">
  var base = +new Date(2016, 9, 3);
  var oneDay = 24 * 3600 * 1000;
  var date = [];

  var data = [Math.random() * 100];

  for (var i = 1; i < 100; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    data.push(Math.round((Math.random()) * 20 ));
  }

  console.log(JSON.stringify(date))
  console.log(JSON.stringify(data))
  // debugger
  option1 = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      left: 'center',
      text: 'cpu使用率曲线',
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: date
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },

    series: [
    {
      name:'模拟数据',
      type:'line',
      smooth:true,
      symbol: 'none',
      sampling: 'average',
      itemStyle: {
        normal: {
          color: 'rgb(255, 70, 131)'
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(255, 158, 68)'
          }, {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }])
        }
      },
      data: data
    }
    ]
  };

  option2 = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      left: 'center',
      text: '内存使用量曲线（MB）',
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: date
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },

    series: [
    {
      name:'模拟数据',
      type:'line',
      smooth:true,
      symbol: 'none',
      sampling: 'average',
      itemStyle: {
        normal: {
          color: 'rgb(255, 70, 131)'
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(255, 158, 68)'
          }, {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }])
        }
      },
      data: data
    }
    ]
  };


  option3 = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      left: 'center',
      text: '磁盘占用量曲线（MB）',
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: date
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },

    series: [
    {
      name:'模拟数据',
      type:'line',
      smooth:true,
      symbol: 'none',
      sampling: 'average',
      itemStyle: {
        normal: {
          color: 'rgb(255, 70, 131)'
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(255, 158, 68)'
          }, {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }])
        }
      },
      data: data
    }
    ]
  };

  option4 = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      left: 'center',
      text: 'I/0输入输出曲线（MB）',
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: date
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },

    series: [
    {
      name:'模拟数据',
      type:'line',
      smooth:true,
      symbol: 'none',
      sampling: 'average',
      itemStyle: {
        normal: {
          color: 'rgb(255, 70, 131)'
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(255, 158, 68)'
          }, {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }])
        }
      },
      data: data
    }
    ]
  };
</script>